<template>
  <div class="app-container">
    <div class="filter-container">
      <template v-if="isInH5">
        <el-select v-model="rtcStreamSelected" placeholder="请选择" class="filter-item" style="width:80%">
          <el-option
            v-for="(item,index) in rtcStreamList"
            :key="index"
            :label="item"
            :value="item">
          </el-option>
        </el-select>
      </template>
      <template v-else>
        <el-select v-model="rtcStreamSelectedList" multiple placeholder="请选择" class="filter-item" style="width:80%">
          <el-option
            v-for="(item,index) in rtcStreamList"
            :key="index"
            :label="item"
            :value="item">
          </el-option>
        </el-select>
      </template>
      <el-button style="margin-left: 10px" :loading="listLoading" class="filter-item" type="primary"
                 @click="getList">刷新
      </el-button>
    </div>
    <div class="remote-list">
      <template v-if="isInH5">
        <template v-if="rtcStreamSelected">
          <jessica-player class="remote-item" :stream-path="rtcStreamSelected"></jessica-player>
        </template>
      </template>
      <template v-else>
        <template v-for="(rtcStream,index) in rtcStreamSelectedList">
          <div class="remote-item" :key="index">
            <webrtc-player :stream-path="rtcStream"></webrtc-player>
          </div>
        </template>
      </template>
    </div>
  </div>
</template>

<script>
  import {getStreamPath, getWebRtcRemoteSdp} from "../../api/api";
  import WebrtcPlayer from "@/components/WebrtcPlayer";
  import JessicaPlayer from '@/components/JessicaPlayer'
  import {isH5} from "@/utils";

  const isInH5 = isH5()
  export default {
    name: "Home",
    rtcPeerConnection: null,
    data() {
      return {
        iceConnectionState: '',
        rtcPeerConnectionInit: false,
        rtcStreamList: [],
        rtcStreamSelectedList: [],
        rtcStreamSelected: null,
        arrayStr: '',
        listLoading: false,
        isInH5: isInH5
      }
    },
    components: {WebrtcPlayer, JessicaPlayer},
    created() {

    },
    async mounted() {
      await this.getList()
    },
    methods: {
      async getList() {
        this.listLoading = true;
        let response = await getStreamPath();
        let array = response.data || [];
        this.listLoading = false;
        if (array.length > 0) {
          const arrayStr = array.join(',');
          if (arrayStr !== this.arrayStr) {
            this.rtcStreamList = array;
            this.arrayStr = arrayStr;
          }
        }
      },
    },
    destroyed() {
    }
  }
</script>

<style lang="scss" scoped>

  .remote-list {
    display: flex;
    flex-wrap: wrap;
  }

  .remote-item {
    width: 200px;
    height: 200px;
    margin: 0 10px;
    margin-bottom: 20px;

    &:first-child {
      margin-left: 0;
    }

    video {
      height: 100%;
      width: 100%;
    }
  }
</style>
